<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>问题列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="koubeiList != ''" class="text item">
      <!-- 
         表格相关属性：
         data：表示表格展示的列表数据
         stripe：隔行变色
       -->
      <el-table
        height="350"
        :data="koubeiList"
        stripe
        style="width: 100%"
        border
        header-cell-class-name="table_header_list"
      >
        <!-- 索引列 -->
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column prop="id" label="编号" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          width="200"
          align="center"
        ></el-table-column>
        <!-- 
          使用过滤器格式化日期数据
          通过 scoped slot 可以获取到 row，column，$index和store（table内部的状态管理）的数据
         -->
        <el-table-column
          prop="inputtime"
          label="报告日期"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              scope.row.inputtime | timeFilter
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="source" label="来源" width="100" align="center">
          <!-- 自定义模板 -->
          <template slot-scope="scope">
            <el-tag :type="scope.row.source | tagChangeFilter" effect="dark">
              {{ scope.row.source }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="message"
          label="问题描述"
          align="center"
        ></el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="200" align="center">
          <!-- 自定义模板 -->
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="
                $router.push('/index/kb-update/' + scope.row.id + '/list')
              "
              >编辑</el-button
            >
            <el-button
              @click="delKouBei(scope.row.id)"
              icon="el-icon-edit"
              size="mini"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagetoolbar" style="margin-top: 20px; text-align: right">
        <!-- 分页控件条
        layout：布局 里面值代表所布局包含的控件
        total：总记录数 sizes：每页记录数下拉栏
        prev：上一页 next：下一页
        page：导航页
        jumper：跳转页
        background：分页按钮背景色

       -->
        <el-pagination
          @current-change="handelCurrentChange"
          @size-change="handleSizeChange"
          background
          :current-page="pageInfo.curr"
          :page-sizes="pagesizes"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </div>
    </div>
    <el-empty
      :image-size="500"
      image=""
      v-else
      description="没有任何数据"
    ></el-empty>
  </el-card>
</template>
<script>
// 引入问题接口
import request from "@/api/koubei.js";
// 引入插件
import Nprogress from "nprogress";
// 引入样式
import "nprogress/nprogress.css";
export default {
  // 创建状态对象，在当前vue组件中使用的
  data() {
    return {
      // 记录分页当前页和每页记录数
      pageInfo: {
        curr: 1,
        limit: 5,
        total: "",
      },
      // 表格展示数据
      koubeiList: "",
      // 每页记录数集合
      pagesizes: [5, 10, 15, 20],
    };
  },
  methods: {
    // 页面加载数据的方法，会牵扯到反复使用
    // 发起查询分页问题记录请求
    async loadData() {
      let { data } = await request.getKouBeiList(this.pageInfo);
      // 用后台返回数据给koubeiList赋值
      this.koubeiList = data.list;
      this.pageInfo.total = data.total;
    },
    // 点击删除按钮，触发方法
    async delKouBei(id) {
      // console.log("del...."+id);
      // 消息提示框
      // 异常捕获
      try {
        let choice = await this.$confirm("确定删除吗？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        console.log(choice); //cancel取消 confirm确定
        // 判断选择的是确定还是取消
        if (choice == "confirm") {
          // 发起请求，给服务器，让服务器做数据库删除的操作
          let {
            data: { code },
          } = await request.delkb(id);
          console.log(code);
          // code=0删除成功 code=-1删除失败
          if (code == 0) {
            // console.log("删除成功")
            // 改成elementUi里面的消息提示
            this.$message({
              message: "删除成功",
              type: "success",
            });
            // 删除完成之后，旧的数据还显示在表格中，怎么解决？
            // 调用加载页面数据的方法
            this.loadData();
          } else {
            // console.log("删除失败");
            this.$message().error("删除失败");
          }
        }
      } catch (e) {
        console.log(e);
        // 取消按钮
        this.$message({
          message: "已取消删除",
          type: "info",
        });
      }
    },
    // 当前页发生变化的时候触发
    handelCurrentChange(val) {
      console.log("当前页发生改变..." + val);
      // 修改当前页的状态值
      this.pageInfo.curr = val;
      // 加载页面
      this.loadData();
    },
    // 当前每页记录数变化的时候触发
    handleSizeChange(val) {
      console.log("当前每页记录数改变..." + val);
      // 修改每页记录数
      this.pageInfo.limit = val;
      // 加载页面
      this.loadData();
    },
  },
  // 钩子函数
  created: function () {
    // 发起查询分页问题记录请求
    this.loadData();
    Nprogress.start(0.5);
  },
  mounted: function () {
    // 关闭进度条
    Nprogress.done();
  },
};
</script>
<style>
/*修改进度条样式*/
/*
#nprogress .bar{
  background: #79669d;
  height: 5px;
}*/
/*表示分页按钮激活后的样式*/
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #a42542;
  color: #fff;
}
/*表格头部样式*/
.table_header_list {
  background: #fff !important;
  height: 30px !important;
  line-height: 30px !important;
  color: #000;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
</style>
